import React from 'react';

/**
 * 组件挂载阶段，要执行的钩子函数
 *
 * 触发页面更新的三个条件
 * 1. 组件状态发生改变：setState({})
 * 2. forceUpdate
 * 3. 组件的 props 当中的属性值发生改变。
 */
class App extends React.Component {
  constructor(props) {
    console.log('1. constructor()');
    super(props);
    // 初始化state
    // 为事件处理程序绑定this
    this.state = {
      count: 0,
    };
  }

  handleClick = () => {
    // 改变数据出发页面更新
    this.setState({
      count: this.state.count + 1,
    });

    // 不改变数据，可以使用 forceUpdate() 强制页面刷新
    // this.forceUpdate();
  };

  render() {
    console.log('2. render');
    console.log(
      'render',
      document.getElementById('h1-id') &&
        document.getElementById('h1-id').innerText
    );
    return (
      <div>
        <h1 id={'h1-id'}>{this.state.count}</h1>
        <button onClick={this.handleClick}>点击次数{this.state.count}</button>
        <Counter count={this.state.count} />
      </div>
    );
  }

  componentDidMount() {
    console.log('3. componentDidMount()');
    // 发送网络请求
    // DOM操作
  }

  componentDidUpdate() {
    console.log('4. componentDidUpdate()');
    // 有条件调用 this.setState
    // if (this.state.count < 4) {
    //   this.setState({
    //     count: this.state.count + 1,
    //   });
    // }
    // 可以操作 DOM
    console.log('didupdate', document.getElementById('h1-id'));
  }
}

// 子组件
class Counter extends React.Component {
  constructor(props) {
    console.log('子组件=> 1. constructor()');
    super(props);
  }

  render() {
    console.log('子组件=> 2. render');
    return (
      <div>
        <h3>子组件内容：{this.props.count}</h3>
      </div>
    );
  }

  componentDidMount() {
    console.log('子组件=> 3. componentDidMount()');
  }

  componentDidUpdate() {
    console.log('子组件=> 4. componentDidUpdate()');
  }

  componentWillUnmount() {
    console.log('子组件=> 5. componentWillUnmount()');
  }
}

export default App;
